import React, { useState, useMemo, memo } from 'react';

/**
 * useMemo传入子组件引用类型
 */

const HYInfo = memo((props) => {
    console.log('HYInfo重新渲染');
    return <h2>名字: {props.info.name} 年龄: {props.info.age}</h2>
})

export default function MemoHookDemo2() {
    console.log('MemoHookDemo2重新渲染');
    const [show, setShow] = useState(true);

    // 这样返回的是一个局部变量,每次都会有一个新的对象返回
    // 所以useMemo不起作用
    // const info = {name: 'leon', age: 18};

    // 这样做就不会重新渲染子组件
    const info = useMemo(() => {
        return {name: 'leon', age: 18}
    }, [])

    return (
        <div>
            <HYInfo info={info}></HYInfo>
            <button onClick={e => setShow(!show)}>show切换</button>
        </div>
    )
}